<div
  fxLayout="row"
  fxLayout.lt-sm="column-reverse"
  [class.full-height]="isLarge"
>
  <nz-sider
    [nzCollapsible]="isLarge"
    [(nzCollapsed)]="ms.enemyListCollapsed"
    nzCollapsedWidth="50"
    [nzWidth]="'200px'"
    [nzTheme]="ms.sideTheme"
  >
    <!-- nzWidth="200px" -->
    <ul
      nz-menu
      [nzTheme]="ms.sideTheme"
      nzMode="inline"
      [nzInlineCollapsed]="ms.enemyListCollapsed"
      (cdkDropListDropped)="drop($event)"
      cdkDropList
    >
      <li nz-menu-item routerLink="/enemyList/search" nzMatchRouter>
        <i nz-icon nzType="plus-circle"></i>
        <span>Search</span>
      </li>
      <li
        nz-menu-item
        nzMatchRouter
        *ngFor="let enemy of ms.game.enemyManager.enemies; trackBy: getEnemyId"
        cdkDrag
        [ngClass]="os.darkSide ? 'menu-dark' : 'menu-light'"
      >
        <a [routerLink]="'enemyDetail/' + enemy.id">
          <i nz-icon [nzType]="enemy.icon"></i>
          <span
            [class.text-danger]="enemy.level > ms.game.enemyManager.maxLevel"
          >
            lv.
            {{ enemy.level | number: "1.0-0" }}
          </span>
          <span *ngIf="!ms.enemyListCollapsed">{{ enemy.name }}</span>
        </a>
      </li>
    </ul>
  </nz-sider>

  <div class="inner-content"><router-outlet></router-outlet></div>
</div>
